<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('科目类型')" prop="subjectType">
            <dict-select v-model="form.subjectType" dictionary="pcw_subject_type" :placeholder="$t('科目类型')" :clearable="false" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item :label="$t('上级科目')" prop="subjectName">
            <el-input v-model="form.parentId" :placeholder="$t('上级科目')" />
          </el-form-item>
        </el-col> -->
        <el-col v-if="!addType" :span="12">
          <el-form-item :label="$t('父级科目')" prop="subjectName">
            <el-select v-model="form.parentId" filterable clearable placeholder="请选择">
              <el-option v-for="item in subjectOptions" :key="item.id" :label="item.subjectName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('科目名字')" prop="subjectName">
            <el-input v-model="form.subjectName" :placeholder="$t('科目名字')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.id" :span="12">
          <el-form-item :label="$t('科目编码')" prop="subjectCode">
            <el-input v-model="form.subjectCode" :placeholder="$t('科目编码')" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('行次')" prop="rowNum">
            <el-input-number v-model="form.rowNum" style="width: 100%;" :placeholder="$t('排序')" controls-position="sort" :precision="0" :max="9999" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('计算逻辑')">
            <el-radio-group v-model="form.calcType">
              <el-radio label="S">+借方-贷方</el-radio>
              <el-radio label="N">-借方+贷方</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('排序')" prop="sort">
            <el-input-number v-model="form.sort" style="width: 100%;" :placeholder="$t('排序')" controls-position="sort" :precision="0" :max="9999" />
          </el-form-item>
        </el-col>
      <!-- <el-col :span="12">
          <el-form-item :label="$t('公式显示值')" prop="formulaLabel">
            <el-input v-model="form.formulaLabel" :placeholder="$t('公式显示值')" />
          </el-form-item>
        </el-col> -->
      <!-- <el-col :span="12">
          <el-form-item :label="$t('公式集合')" prop="formulaList">
            <el-input v-model="form.formulaList" :placeholder="$t('公式集合')" show-word-limit maxlength="127" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('公式')" prop="formula">
            <el-input v-model="form.formula" :placeholder="$t('公式')" show-word-limit maxlength="127" />
          </el-form-item>
        </el-col> -->
      </el-row>
      <div v-if="sheetType!=='cash_flow_sheet'">
        <div class="area-header">
          <span class="area-header-title">{{ $t('公式规则') }}</span>
        </div>
        <el-table :data="form.tempRuleList" class="nowrapTable formTable" border>
          <el-table-column :label="$t('科目名称')" align="center" prop="subjectSysName">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949; margin-right: 4px">*</i>
              <span>{{ $t('科目名称') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'tempRuleList.' + scope.$index + '.subjectCode'" :rules="tempRuleListRules.subjectCode">
                <el-select v-model="scope.row.subjectCode" filterable clearable placeholder="请选择">
                  <el-option v-for="item in ruleSubjectOptions" :key="item.id" :label="item.subjectName" :value="item.subjectCode" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('运算符号')" align="center" prop="oper">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949; margin-right: 4px">*</i>
              <span>{{ $t('运算符号') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'tempRuleList.' + scope.$index + '.oper'" :rules="tempRuleListRules.oper">
                <dict-select v-model="scope.row.oper" dictionary="fin_oper" :placeholder="$t('运算符号')" :clearable="false" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('取数规则')" align="center" prop="rule">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949; margin-right: 4px">*</i>
              <span>{{ $t('取数规则') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'tempRuleList.' + scope.$index + '.rule'" :rules="tempRuleListRules.rule">
                <dict-select v-model="scope.row.rule" :dictionary="dictType" :placeholder="$t('取数规则')" :clearable="false" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="140">
            <template slot-scope="scope">
              <el-button size="small" type="text" icon="el-icon-delete" @click="delRule(scope.$index, scope.row)">{{ $t("删除") }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="tol">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addRule">{{ $t("添加") }}</el-button>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn />
    </div>
  </div>
</template>

<script>
import {
  saveFinSysSubjectTemp,
  getFinSysSubjectTemp,
  findParentSubject,
  deleteRule,
  findAllSubject
} from '@/api/fin/sysTemp/finSysSubjectTemp'
export default {
  data() {
    return {
      // 表单参数
      form: {
        tempRuleList: []
      },
      dictType: 'fin_rule_income_sheet',
      sheetType: '',
      tempId: undefined,
      subjectOptions: [],
      ruleSubjectOptions: [],
      addType: false,
      // 遮罩层
      loading: false,
      // 表单校验
      rules: {
        subjectType: [{
          required: true,
          message: this.$t('必填信息'),
          trigger: 'blur'
        }],
        subjectName: [{
          required: true,
          message: this.$t('必填信息'),
          trigger: 'blur'
        }]
      },
      tempRuleListRules: {
        subjectCode: [{
          required: true,
          message: this.$t('必填信息'),
          trigger: 'blur'
        }],
        oper: [{
          required: true,
          message: this.$t('必填信息'),
          trigger: 'blur'
        }],
        rule: [{
          required: true,
          message: this.$t('必填信息'),
          trigger: 'blur'
        }]

      }
    }
  },
  created() {

  },
  methods: {
    // 初始化数据
    init(data) {
      this.loading = true
      this.addType = data.parentId === '0'
      if (data != null && data.id !== undefined) {
        getFinSysSubjectTemp(data.id).then(response => {
          this.form = response.data
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      } else {
        this.reset()
        this.form.subjectType = data.parentType
        this.loading = false
      }
      this.initSubjectArr(data)
      this.findAllSubject()
      this.dictType = data.parentType === 'income_sheet' ? 'fin_rule_income_sheet' : 'fin_rule_income_cash_flow_sheet'
      this.sheetType = data.parentType
      this.tempId = data.tempId
      this.form.parentId = data.parentId
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        subjectType: undefined,
        subjectName: undefined,
        subjectCode: undefined,
        rowNum: undefined,
        sort: undefined,
        calcType: 'S',
        formulaLabel: undefined,
        formulaList: undefined,
        formula: undefined
      }
      this.form.calcType = 'S'
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      if (this.$parent.$parent.formOpen !== undefined) {
        this.$parent.$parent.formOpen = false
      }
      // 刷新list页面
      if (this.$parent.$parent.getList !== undefined) {
        this.$parent.$parent.getList()
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          this.form.tempId = this.tempId
          saveFinSysSubjectTemp(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.closeForm()
            } else {
              this.msgError(response.msg)
            }
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      }).catch(() => {
        this.loading = false
      })
    },
    initSubjectArr(data) {
      findParentSubject(data.parentType).then(res => {
        this.subjectOptions = res.data
      })
    },
    addRule() {
      const row = {
        id: undefined,
        subjectCode: undefined,
        oper: undefined,
        rule: undefined
      }
      if (!(this.form.tempRuleList instanceof Array)) {
        this.$set(this.form, 'tempRuleList', [])
      }
      this.$nextTick(() => {
        this.form.tempRuleList.push(row)
      })
    },
    delRule(index, row) {
      const id = row.id
      if (id !== undefined && id !== '' && id != null) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
          })
          .then(() => {
            // 调用接口
            deleteRule(id)
            this.form.tempRuleList.splice(index, 1)
            return this.msgSuccess(this.$t('删除成功'))
          })
          .catch(function() {})
      } else {
        this.form.tempRuleList.splice(index, 1)
      }
    },
    findAllSubject() {
      findAllSubject().then(res => {
        this.ruleSubjectOptions = res.data
      })
    }
  }
}
</script>
